<template>
  <div class="bigbox">
    <el-tree
      :data="data"
      :props="defaultProps"
      default-expand-all
      :expand-on-click-node="false"
    >
      <div slot-scope="{ data: data1 }" class="item">
        <div class="left">
          {{ data1.name }}
        </div>
        <div class="right">
          <span class="ri-name">{{ data1.managerName }}</span>
          <el-dropdown @command="handleCommand($event, data1.id)">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add"> 添加子部门 </el-dropdown-item>
              <el-dropdown-item command="edit"> 编辑部门 </el-dropdown-item>
              <el-dropdown-item command="del"> 删除 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-tree>
    <!-- <addDeptVue ref="addDialogRef" /> -->
    <addDeptVue
      ref="addDeptRef"
      :visible.sync="dialogVisible"
      :origin-list="originList"
      :current-id="currentId"
      @updateParent="getDepartment"
    />

    <!-- <syncComVue v-model="count" /> -->
    <!-- {{ count }}---{{ msg }} -->
    <!-- <syncComVue :value="count" @input="count = $event" /> -->
    <!-- sync -->
    <!-- 原生 -->
    <!-- <syncComVue :msg="msg" @updata:msg="msg = $event" /> -->
    <!-- .sync -->
    <!-- <syncComVue :msg.sync="msg" /> -->
  </div>
</template>
<script>
// import child from '@/views/department/child.vue'
import { getDepartmentRequest, deleteDepartmentByIdRequest } from '@/api/department'
//转平铺的树形结构
import { transListToTreeData } from '@/utils'
import addDeptVue from './components/add-dept.vue'
//父子组件复习
// import syncComVue from './syncCom.vue'
export default {
  name: 'DepartmentCom',
  components: {
    // child
    addDeptVue,
    // syncComVue
  },
  data () {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      count: 1,
      msg: 20,
      dialogVisible: false,
      originList: [],
      currentId: null
    }
  },
  computed: {
  },
  created () {
    this.getDepartment()
  },
  methods: {
    handleCommand (command, id) {
      this.currentId = id

      if (command == 'add') {
        // this.$refs.addDialogRef.open()
        this.dialogVisible = true
      } else if (command == 'edit') {
        this.dialogVisible = true
        //等到dom渲染成功以后,在执行
        //currentId在父组件一旦发生改变.里面通知子组件去更新自己的dom页面
        //dom更新是异步的操作,需要使用$nextTick 等子组件更新好了 以后,props是最新的值了
        this.$nextTick(() => {
          this.$refs.addDeptRef.getDepartmentById()

        })
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await deleteDepartmentByIdRequest(id)
          this.getDepartment()
        }).catch(() => {

        });
      }
    },
    async getDepartment () {
      const res = await getDepartmentRequest()
      // console.log(res)
      this.originList = res.data
      this.data = transListToTreeData(res.data, 0)
    },
  }
}
</script>
<style lang='scss'  scoped>
.ri-name {
  margin-right: 10px;
}
.bigbox {
  padding: 20px;
  .item {
    width: 100%;
    display: flex;
    .left {
      flex: 4;
      // background-color: skyblue;
      padding: 10px 0;
    }
    .right {
      flex: 1;
      padding: 10px 0;
    }
  }
}
</style>
